﻿{include file="../public/head" /}

<link rel="stylesheet" href="__STATIC__/mobile/css/mdui.css" />
<link rel="stylesheet" href="__STATIC__/mobile/css/app.css" />
</head>
<body>
<div class="container-fluid">
	<!--右部菜单-->
	{include file="public/right" /}
	<!--搜索-->
	<div class="search">
		<div class="search-lg">
			<img src="__STATIC__/../logo/{$logo.value}">
		</div>
	</div>
	<div class="log">
		<div class="log-con">
			<div class="layui-card">
				<div class="layui-card-header">注意事项</div>
				<div class="layui-card-body">
					1 支持 拍摄和选取相册车辆<br>
					2 直接拍车辆车牌照片即可<br>
					3 提示错误信息后请重新上传{$is_ios}<br>
				</div>
			</div>
			<fieldset class="layui-elem-field">
				<legend>第一步 拍摄车牌</legend>
				<div class="layui-field-box">
					<div class="m-t ibox-content layui-form">
						<div class="layui-form-item">
							<div class="layui-upload">
								<div class="layui-upload">
									<button type="button" class="layui-btn layui-btn-normal" id="test8"><i class="layui-icon">&#xe660;</i>拍摄</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</fieldset>
			<fieldset class="layui-elem-field">
				<legend>第二步 云端识别</legend>
				<div class="layui-field-box">
					<!--form元素开始-->
					<div class="m-t ibox-content layui-form">
						<div class="layui-form-item">
							<div class="layui-upload">
								<div class="layui-upload">
									<button type="button" class="layui-btn" id="test9"><i class="layui-icon">&#xe665;识别</i></button>
								</div>
							</div>
						</div>
					</div>
					<!--form元素结束-->
				</div>
			</fieldset>
			<fieldset class="layui-elem-field">
				<legend>第三步 结果</legend>
				<div class="layui-field-box">
					<p><b>车牌：</b><span id="car_number"></span></p>
					<p><b>车主：</b><span id="username"></span></p>
					<p><b>手机号码：</b><span id="tel"></span></p>
				</div>
			</fieldset>
		</div>
	</div>
	<script>
		layui.use('upload', function() {
			var $ = layui.jquery
					, upload = layui.upload;
			//选完文件后不自动上传
			upload.render({
				elem: '#test8'
				,url: '{:url(\'api/upload/car_upload\')}' //改成您自己的上传接口
				,auto: false
				,multiple: true
				,size: 16000
				,bindAction: '#test9'
				,done: function(res){
					var index = layer.load();
					if(res.status == 500) {
						layer.close(index);
						layer.open({
							title: '识别失败'
							,content: res.message
						});
					}else if(res.status == 200) {
						layer.msg('识别成功');
						//上传成功，DOM元素发生变化
						// $('#car_number').attr('value',res.data.car_number);
						$.ajax({
							url:"{:url('index/index/index')}",
							type:'post',
							dataType:'json',
							data:{car_number:res.data.car_number},
							success:function(res){
								if (res.message == 1) {
									layer.close(index);
									$('#car_number').text(res.data.car_number);
									$('#username').text(res.data.username);
									$('#tel').text(res.data.tel);
								} else if (res.message == 0) {
									layer.close(index);
									layer.open({
										title: '识别失败'
										,content: res.data.msg
									});
								} else {
									layer.close(index);
									layer.open({
										title: '识别失败'
										,content: '出现未知错误，如果问题一直出现，您可以联系管理员或站点留言'
									});
								}
							},error:function () {
								layer.close(index);
								layer.open({
									title: '识别失败'
									,content: '当前网络环境不安全，拒绝登录，请调整网络环境'
								});
							}
						})


					}
				}
			});
		});
	</script>
	<script>
		layui.use('layer', function(){
			var layer = layui.layer;
			layer.open({
				title: '识别车辆提示'
				,content: '1.车辆选取支持拍摄和选取相册<br>' +
						'2.在点击识别后不要着急，等待出现提示后再操作<br>'

			});
		});
	</script>
	<!--底部版权-->
	{include file="../public/footer" /}
</div>
<script src="__STATIC__/mobile/js/mdui.js"></script>
</body>
</html>



